@page "/Bubble_Chart"
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<Tabs>
    <TabPane Key="1" Tab="Sample 1">
        <Scatter Config="config1" OnFirstRender="Chart1_FirstRender" />
    </TabPane>
    @* <TabPane Key="2" Tab="Sample 2"> *@
    @*     <Scatter Config="config2" OnFirstRender="Chart2_FirstRender" /> *@
    @* </TabPane> *@
    @*<TabPane Key="3">
    <Tab>示例3</Tab>
    <ChildContent>
    <Bubble @ref="chart3" Data="data3" Config="config3" />
    </ChildContent>
    </TabPane>
    <TabPane Key="4">
    <Tab>示例4</Tab>
    <ChildContent>
    <Bubble @ref="chart4" Data="data4" Config="config4" />
    </ChildContent>
    </TabPane>*@
</Tabs>

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <Scatter @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }


    SmokingRateItem[] data1;

    protected override async Task OnInitializedAsync()
    {
        data1 = await DemoData.SmokingRateAsync(NavigationManager, HttpClient);
        await base.OnInitializedAsync();
    }

    #region 示例1

    private void Chart1_FirstRender(IChartComponent chart1)
    {
        chart1.ChangeData(data1);
    }

    //smoking-rate
    readonly ScatterConfig config1 = new ScatterConfig
    {
        XField = "change in female rate",
        YField = "change in male rate",
        SizeField = "pop",
        ColorField = "continent" ,
        Color = new[] { "#ffd500", "#82cab2", "#193442", "#d18768", "#7e827a" },
        Size = new []{4,30},
        Shape = "circle",
        PointStyle = new GraphicStyle()
        {
            FillOpacity = new decimal(0.8),
            Stroke = "#bbb"

        },
        XAxis = new ValueTimeAxis
        {
            Min = -25,
            Max = 5,
            Grid = new BaseAxisGrid()
            {
                Line = new BaseAxisGridLine()
                {
                    Style = new LineStyle()
                    {
                        Stroke = "#eee"
                    }
                }
            }
        },
        YAxis = new ValueTimeAxis()
        {
            Line = new BaseAxisLine()
            {
                Style = new LineStyle()
                {
                    Stroke = "#aaa"
                }
            }
        },
        Quadrant = new QuadrantConfig()
        {
            Label = new []
            {
                new
                {
                    Content ="Male decrease,\\nfemale increase"
                },
                new
                {
                    Content ="Female decrease,\nmale increase"
                },
                new
                {
                    Content ="Female & male decrease"
                },
                new
                {
                    Content ="Female &\n male increase"
                },
            }
        }
    };

    #endregion 示例1

    #region 示例2

    private void Chart2_FirstRender(IChartComponent chart2)
    {
        chart2.ChangeData(data1);
    }

    //smoking-rate
    readonly ScatterConfig config2 = new ScatterConfig
    {
        XField = "change in female rate",
        YField = "change in male rate",
        SizeField = "pop",
        PointSize = new[] { 4, 30 },
        ColorField = new[] { "continent" },
        Color = new[] { "#ffd500", "#82cab2", "#193442", "#d18768", "#7e827a" },
        PointStyle = new GraphicStyle
        {
            Stroke = "#777777",
            LineWidth = 1,
            Opacity = 0.8,
        },
        XAxis = new ValueTimeAxis
        {
            Visible = true,
            Max = 5,
            Min = -25
        },
        Quadrant = new QuadrantConfig
        {
            Visible = true,
            XBaseline = 0,
            YBaseline = 0,
            RegionStyle = new object[]
            {
                new {fill= "#d8d0c0", opacity= 0.2},
                new {fill= "#a3dda1", opacity= 0.1},
                new {fill= "white", opacity= 0},
                new {fill="#d8d0c0", opacity=0.2}
                    },
            Label = new
            {
                Text = new[]
                {
                    "Female decrease,\nmale increase",
                    "Female & male decrease",
                    "Female &\n male increase",
                    "Male decrease,\nfemale increase"
                },
            }
        }
    };

    #endregion 示例2

    #region 示例3

    //smoking-rate
    readonly ScatterConfig config3 = new ScatterConfig
    {
        XField = "Revenue_per_club",
        YField = "UEFA_points",
        SizeField = "UEFA_points",
        PointSize = new[] { 4, 25 },
        ColorField = new[] { "revenueGroup" },
        Color = new[] { "#72302f", "#beb298", "#d18768", "#e3cda1" },  //#72302f', '#beb298', '#d18768', '#e3cda1']
        PointStyle = new GraphicStyle
        {
            Stroke = "#777777",
            LineWidth = 1,
            Opacity = 0.9,
        },
        XAxis = new ValueTimeAxis
        {
            Visible = true,
            Max = 230,
            Min = -5,
            Nice = false,
        },
        Trendline = new TrendlineConfig
        {
            Visible = true,
            Type = "log",
        }
    };

    #endregion 示例3

    #region 示例4

    //smoking-rate
    readonly ScatterConfig config4 = new ScatterConfig
    {
        XField = "income",
        YField = "lifeExpectancy",
        SizeField = "population",
        ColorField = "country",
        PointSize = new[] { 4, 80 },
        Color = new[]{
            "#5B8FF9",
            "#5AD8A6",
            "#f03838",
            "#35d1d1",
            "#E8684A",
            "#6DC8EC",
            "#9270CA",
            "#FF9D4D",
            "#F6BD16",
            "#FF99C3",
        },

        PointStyle = new GraphicStyle
        {
            Stroke = "#777777",
            LineWidth = 1,
            Opacity = 0.8,
        },
        XAxis = new ValueTimeAxis
        {
            Visible = true,
            Max = 100000,
            Min = 300,
            Nice = false,
            Type = "log",
            Title = new BaseAxisTitle
            {
                Visible = true,
                Text = "人均收入",
            }
        },

        YAxis = new ValueTimeAxis
        {
            Visible = true,
            Max = 100,
            Min = 0,
            Title = new BaseAxisTitle
            {
                Visible = true,
                Text = "人均寿命",
            }
        },

        Tooltip = new Charts.Tooltip
        {
            Visible = true,
            ShowTitle = true,
            TitleField = "country",
            Fields = new[]
            {
                "income",
                "liftExpectany",
                "population",
            }

        },

        Label = new Label
        {
            Visible = true,
            Field = "country",
        },

        Interactions = new Interaction[]
        {
            new Interaction
            {
                Type="timeline",
                Cfg = new
                {
                    field = "year",
                    key = "country",
                    loop = true,
                }
            }
            },


    };

    #endregion 示例4
}
